<template>
  <div class="lylrc">
    <div class="recentLayout">
      <recent></recent>
    </div>
    <div class="lylrcLayout">
      <Card :bordered="false" dis-hover>
        <ul>
          <li v-for="item in lyric">{{item[1]}}</li>
        </ul>
      </Card>
    </div>
  </div>
</template>

<script>
import Recent from "./recent/recent";
import musicApi from "@suen/music-api";
import { mapGetters } from "vuex";
export default {
  components: {
    Recent
  },
  data() {
    return {
      lyric: []
    };
  },
  created() {
    console.log(this.currentMusic);
    musicApi.qq.getLyric(this.currentMusic.id).then(response => {
      this.lyric = response.data.lyric;
    });
  },

  computed: {
    ...mapGetters(["currentMusic"])
  }
};
</script>

<style scoped>
.lylrc {
}
.recentLayout {
  float: left;
  width: 70%;
}
.lylrcLayout {
  float: left;
  width: 29%;
}
</style>
